<template>
	<div :style='{"width":"100%","padding":"30px 7% 40px","margin":"0px auto","position":"relative","background":"none"}'>
		<el-button :style='{"border":"0","cursor":"pointer","padding":"0 10px","margin":"0 10px 20px 0","outline":"none","color":"#fff","borderRadius":"6px","background":"#1e3c4f","width":"auto","lineHeight":"36px","fontSize":"14px","height":"36px"}' type="warning" size="mini" @click="backClick" class="el-icon-back">返回</el-button>
		<div class="section-title" :style='{"padding":"12px 0 0","margin":"0px auto","color":"#1b394c","textAlign":"left","background":"url(http://codegen.caihongy.cn/20231009/8f2613f5f198426ab730d135e0a2e138.png) no-repeat 120px center","width":"100%","fontSize":"24px","fontWeight":"600","height":"60px"}'>待做问卷列表</div>
		<el-table
		  :data="tableData"
		  style="width: 100%">
		  <el-table-column
			label="问卷名称"
			prop="exampaperName">
		  </el-table-column>
		  <el-table-column
			label="问卷调查时长(分钟)"
			prop="exampaperDate">
		  </el-table-column>
		  <el-table-column label="操作" width="150">
			<template slot-scope="scope">
			  <el-button style="border-radius: 15px;background-color: darkcyan;color: white;" 
				size="mini"
				@click="handleEdit(scope.$index, scope.row)">问卷调查</el-button>
			  <!-- <el-button
				size="mini"
				type="danger"
				@click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
			</template>
		  </el-table-column>
		</el-table>
		
		<el-pagination
		  background
		  id="pagination" class="pagination"
		  :pager-count="7"
		  :page-size="pageSize"
		  :page-sizes="pageSizes"
		  prev-text="上一页"
		  next-text="下一页"
		  :hide-on-single-page="false"
		  :layout='["prev","pager","next"].join()'
		  :total="total"
		  :style='{"padding":"5px 0","margin":"20px auto","color":"#333","textAlign":"left","width":"100%","clear":"both","lineHeight":"40px","fontWeight":"500","height":"40px"}'
		  @current-change="curChange"
		  @prev-click="prevClick"
		  @next-click="nextClick"
		></el-pagination>
		
	</div>
	</template>
	
	<script>
	  export default {
		data() {
		  return {
			layouts: '',
			tableData: [],
			total: 1,
			pageSize: 10,pageSizes: [10,20,30,50],
			totalPage: 1
		  }
		},
		created() {
		  this.getMyForumList(1);
		},
		methods: {
		  backClick() {
			  this.$router.push('/index/center')
		  },
		  getMyForumList(page) {
			this.$http.get('exampaper/list', {params: {page, limit: this.pageSize, parentid: 0, sort: 'id', order: 'desc,desc'}}).then(res => {
				if (res.body.code === 0) {
					this.tableData = res.body.data.list;
					this.total = res.body.data.total;
					this.pageSize = res.body.data.pageSize;this.pageSizes = [this.pageSize, this.pageSize*2, this.pageSize*3, this.pageSize*5];
					this.totalPage = res.body.data.totalPage;
			  	}
			});
		  },
		  curChange(page) {
			this.getMyForumList(page);
		  },
		  prevClick(page) {
			this.getMyForumList(page);
		  },
		  nextClick(page) {
			this.getMyForumList(page);
		  },
		  handleEdit(index, row) {
			this.$router.push({path: '/index/exampaperAdd', query: {id: row.id}})
		  },
		  handleDelete(index, row) {
			this.$confirm('是否确认删除?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  let delIds = new Array();
			  delIds.push(row.id);
			  this.$http.post('forum/delete', delIds).then(res => {
				if (res.data.code == 0) {
				  this.$message({
					type: 'success',
					message: '删除成功!',
					duration: 1500,
					onClose: () => {
					  this.getMyForumList(1);
					}
				  });
				}
			  });
			});
		  }
		}
	  }
	</script>
	
	<style rel="stylesheet/scss" lang="scss" scoped>
	  .section {
		width: 900px;
		margin: 0 auto;
	  }
	  
	  #pagination.el-pagination /deep/ .el-pagination__total {
				margin: 0 10px 0 0;
				color: #666;
				font-weight: 400;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .btn-prev {
				border: none;
				border-radius: 2px;
				padding: 0 6px;
				margin: 0 5px;
				color: #666;
				background: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				min-width: 35px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .btn-next {
				border: none;
				border-radius: 2px;
				padding: 0 6px;
				margin: 0 5px;
				color: #666;
				background: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				min-width: 35px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .btn-prev:disabled {
				border: none;
				cursor: not-allowed;
				border-radius: 2px;
				padding: 0 6px;
				margin: 0 5px;
				color: #C0C4CC;
				background: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .btn-next:disabled {
				border: none;
				cursor: not-allowed;
				border-radius: 2px;
				padding: 0 6px;
				margin: 0 5px;
				color: #C0C4CC;
				background: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .el-pager {
				padding: 0;
				margin: 0;
				display: inline-block;
				vertical-align: top;
			}
	  
	  #pagination.el-pagination /deep/ .el-pager .number {
				cursor: pointer;
				padding: 0 4px;
				margin: 0 5px;
				color: #666;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: #fff;
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .el-pager .number:hover {
				cursor: pointer;
				padding: 0 4px;
				margin: 0 5px;
				color: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: #8e9da6;
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .el-pager .number.active {
				cursor: default;
				padding: 0 4px;
				margin: 0 5px;
				color: #FFF;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: #8e9da6;
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .el-pagination__sizes {
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .el-pagination__sizes .el-input {
				margin: 0 5px;
				width: 100px;
				position: relative;
			}
	  
	  #pagination.el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
				border: 1px solid #DCDFE6;
				cursor: pointer;
				padding: 0 25px 0 8px;
				color: #606266;
				display: inline-block;
				font-size: 13px;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: #FFF;
				width: 100%;
				text-align: center;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
				top: 0;
				position: absolute;
				right: 0;
				height: 100%;
			}
	  
	  #pagination.el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
				cursor: pointer;
				color: #C0C4CC;
				width: 25px;
				font-size: 14px;
				line-height: 28px;
				text-align: center;
			}
	  
	  #pagination.el-pagination /deep/ .el-pagination__jump {
				margin: 0 0 0 24px;
				color: #606266;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .el-pagination__jump .el-input {
				border-radius: 3px;
				padding: 0 2px;
				margin: 0 2px;
				display: inline-block;
				width: 50px;
				font-size: 14px;
				line-height: 18px;
				position: relative;
				text-align: center;
				height: 28px;
			}
	  
	  #pagination.el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
				border: 1px solid #DCDFE6;
				cursor: pointer;
				padding: 0 3px;
				color: #606266;
				display: inline-block;
				font-size: 14px;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: #FFF;
				width: 100%;
				text-align: center;
				height: 28px;
			}
	</style>
	